<template>
  <div id="websiteSetting" class="container">
    <h3 class="title">
      <span />
      网站基本设置
    </h3>
    <el-tabs
      id="tabcard"
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="基本设置" name="basic">
        <el-form
          ref="basicForm"
          :model="basicForm"
          class="form"
          label-width="140px"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="选择语言:">
                <el-select
                  v-model="lang"
                  placeholder="请选择"
                  @change="changLang"
                >
                  <el-option
                    v-for="item in langList"
                    :key="item.id"
                    :label="item.lang"
                    :value="item.lang"
                  />
                </el-select>
              </el-form-item>
              <el-form-item size="small" label="网站logo:">
                <div class="attachment_imgBox" @click="openList('logo')">
                  <img
                    v-if="basicForm.logo"
                    :src="logoUrl"
                    class="attachmentImg"
                  />
                  <i v-else class="el-icon-camera" />
                </div>
                <Attachment
                  ref="attachment"
                  :dialog-show.sync="dialogShow"
                  :attachment-type="attachmentType"
                  @func="getData"
                />
              </el-form-item>
              <el-form-item size="small" label="网站dark_logo:">
                <div class="attachment_imgBox" @click="openList('dark_logo')">
                  <img
                    v-if="basicForm.dark_logo"
                    :src="dark_logo_url"
                    class="attachmentImg"
                  />
                  <i v-else class="el-icon-camera" />
                </div>
              </el-form-item>
              <el-form-item prop="site_name" label="网站名称:">
                <el-input v-model="basicForm.site_name" />
              </el-form-item>
              <el-form-item prop="icp" label="ICP备案号:">
                <el-input v-model="basicForm.icp" />
              </el-form-item>
              <el-form-item prop="icp_link" label="ICP备案号链接:">
                <el-input v-model="basicForm.icp_link" />
              </el-form-item>
              <el-form-item prop="gwa" label="公安备案号:">
                <el-input v-model="basicForm.gwa" />
              </el-form-item>
              <el-form-item prop="gwa_link" label="公安备案号链接:">
                <el-input v-model="basicForm.gwa_link" />
              </el-form-item>
              <el-form-item label="客户a链接:">
                <el-input v-model="basicForm.customer_link" />
              </el-form-item>
              <el-form-item label="QQ:">
                <el-input v-model="basicForm.qq_code" />
              </el-form-item>
              <el-form-item label="模板共用:">
                <el-radio-group v-model="basicForm.common_template">
                  <el-radio :label="1">PC端移动端共用</el-radio>
                  <el-radio :label="2">PC端移动端不共用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="静态文件路径:">
                <el-input v-model="basicForm.static_file" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="别名规则:">
                <el-select v-model="basicForm.alias_rule">
                  <el-option label="首字母" :value="1" />
                  <el-option label="全拼" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item prop="author" label="作者:">
                <el-input v-model="basicForm.author" />
              </el-form-item>
              <el-form-item prop="wechat_code" label="微信客服:">
                <div class="attachment_imgBox" @click="openList('wechat')">
                  <img
                    v-if="basicForm.wechat_code"
                    :src="wechatUrl"
                    class="attachmentImg"
                  />
                  <i v-else class="el-icon-camera" />
                </div>
              </el-form-item>
              <el-form-item prop="site_email" label="站长邮箱:">
                <el-input v-model="basicForm.admin_email" />
              </el-form-item>
              <el-form-item prop="customer_code" label="客服JS代码:">
                <el-input
                  v-model="basicForm.customer_code"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </el-form-item>
              <el-form-item prop="analytics_code" label="统计代码:">
                <el-input
                  v-model="basicForm.analytics_code"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </el-form-item>

              <el-form-item prop="favicon_link" label="网站favicon:">
                <el-input v-model="basicForm.favicon_link" />
              </el-form-item>
              <el-form-item prop="meta_link" label="搜索引擎授权代码:">
                <el-input
                  v-model="basicForm.meta_link"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                />
              </el-form-item>
              <el-form-item
                class="switch-website"
                prop="isGrey"
                label="一键置灰:"
              >
                <el-switch
                  v-model="basicForm.isGrey"
                  active-color="#f84311"
                  inactive-color="#999"
                  active-value="1"
                  inactive-value="0"
                  active-text="开"
                  inactive-text="关"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              v-loading.fullscreen.lock="loading"
              class="save"
              type="primary"
              size="small"
              @click="save"
            >
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="语言设置" name="lang">
        <Lang v-if="activeName == 'lang'" :website-id="websiteId" />
      </el-tab-pane>
      <el-tab-pane label="服务器设置" name="server">
        <Server v-if="activeName == 'server'" :website-id="websiteId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
import websiteApi from '@/api/website'
import websettingApi from '@/api/websetting'
import Lang from './components/lang.vue'
import Server from './components/server.vue'
import attachmentApi from '@/api/system/attachment'
export default {
  components: { Lang, Server },
  data() {
    return {
      loading: false,
      attachmentLimit: 10,
      dialogShow: false,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: token },
      headers: {},
      logoUrl: '',
      wechatUrl: '',
      imgUrl: this.$store.getters.updateURL,
      options: [], // 站点
      activeName: 'basic',
      websiteId: '',
      searchForm: {
        website_id: ''
      },
      basicForm: {
        icp: '',
        icp_link: '',
        gwa: '',
        gwa_link: '',
        author: '',
        site_email: '',
        analytics_code: '',
        cutomer_code: '',
        common_template: 1,
        static_file: '',
        alias_rule: '2',
        favicon_link: '',
        meta_link: ''
      },
      langList: [],
      lang: '',
      siteId: '',
      uploadType: '',
      attachmentType: '',
      dark_logo_url: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      console.log(val, value)
      this.siteId = val
      console.log(this.siteId)
      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId
    console.log(this.$store.getters)
    if (this.siteId) {
      this.getLang()
    }
  },
  methods: {
    getData(data) {
      if (data.length > 1) {
        this.$message.error('最多只能选择一张图片')
      } else {
        if (this.uploadType == 'logo') {
          this.basicForm.logo = data[0].id
          this.logoUrl = data[0].url
          console.log(this.basicForm.logo, this.logoUrl)
        } else if (this.uploadType == 'wechat') {
          this.basicForm.wechat_code = data[0].id
          this.wechatUrl = data[0].url
          console.log(this.basicForm.wechat_code, this.wechatUrl)
        } else if (this.uploadType == 'dark_logo') {
          this.basicForm.dark_logo = data[0].id
          this.dark_logo_url = data[0].url
          console.log(this.basicForm.dark_logo, this.dark_logo_url)
        }
        this.dialogShow = false
      }
    },
    // 打开附件弹窗
    openList(val) {
      this.dialogShow = true
      this.attachmentType = 2
      this.$nextTick(() => {
        this.$refs.attachment.getAttachmentList()
        this.$refs.attachment.$refs.AttachmentCate.getCateList(0)
        console.log(this.$refs.attachment.$refs.AttachmentCate)
      })
      this.uploadType = val
      console.log(val)
    },

    // 切换语言
    changLang(val) {
      this.lang = val
      this.getBasciInfo()
    },
    // 获取语言
    getLang() {
      websettingApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.lang = res.data[0].lang
        }
        this.getBasciInfo()
      })
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getLang()
    },

    // 获取基本信息
    getBasciInfo() {
      const val = {
        website_id: this.siteId,
        lang: this.lang
      }
      websettingApi.basicInfo(val).then(res => {
        console.log(res.data)
        if (res.code == 0) {
          this.basicForm = res.data.setting
          if (
            !this.basicForm.common_template ||
            this.basicForm.common_template == 'NaN'
          ) {
            this.basicForm.common_template = 1
          } else {
            this.basicForm.common_template = parseInt(
              res.data.setting.common_template
            )
          }
          this.basicForm.alias_rule = res.data.setting.alias_rule * 1
          const logo = res.data.setting.logo
          if (logo instanceof Object) {
            this.logoUrl = res.data.setting.logo.url
            this.basicForm.logo = res.data.setting.logo.id
          }
          const wechat_code = res.data.setting.wechat_code
          if (wechat_code instanceof Object) {
            this.wechatUrl = res.data.setting.wechat_code.url
            this.basicForm.wechat_code = res.data.setting.wechat_code.id
          }
          const dark_logo = res.data.setting.dark_logo
          if (dark_logo instanceof Object) {
            this.dark_logo_url = res.data.setting.dark_logo.url
            this.basicForm.dark_logo = res.data.setting.dark_logo.id
          }
        }
      })
    },
    // 封面照片上传成功
    handleSuccess(res, file, fileList) {
      if (res.code == -200 || res.code == 0) {
        this.logoUrl = URL.createObjectURL(file.raw)
        this.basicForm.logo = res.data.id
      }
    },
    handleSuccess2(res, file, fileList) {
      if (res.code == -200 || res.code == 0) {
        this.wechatUrl = URL.createObjectURL(file.raw)
        this.basicForm.wechat_code = res.data.id
      }
    },
    // 保存编辑
    save() {
      this.loading = true
      this.$refs.basicForm.validate(valid => {
        if (valid) {
          const val = {
            website_id: this.siteId,
            lang: this.lang,
            setting: this.basicForm
          }
          if (!val.setting.static_file) {
            val.setting.static_file = ''
          }
          // console.log(val, '-----------')
          // return
          websettingApi.basicUpdate(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getBasciInfo()
            } else {
              this.$message.error(res.msg)
            }
            this.loading = false
          })
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.attachment .el-dialog {
  height: 640px;
}
#websiteSetting {
  .el-form-item__content {
    line-height: 0 !important;
  }
}
</style>
<style scoped lang="scss">
// .el-table{
//   .attachment{
//     width: 60px;
//   }
// }
#websiteSetting {
  .switch-website {
    ::v-deep .el-form-item__content {
      line-height: 35px !important;
    }
  }
}

.form {
  width: 95%;
  // max-width: 700px;
  margin-top: 20px;
  .el-select {
    width: 100%;
  }
}
.search {
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
.avatar {
  width: 150px;
}
</style>
